<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<title>UI界面组件封装说明</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../js/bootstarp/css/bootstrap.min.css" type="text/css"></link>
	<link rel="stylesheet" href="../../js/bootstarp/css/bootstrap-theme.css" type="text/css"></link>
	<link rel="stylesheet" href="../css/patch.css" type="text/css"></link>
	<link rel="stylesheet" href="../css/docs.min.css" type="text/css"></link>
	
	<!--[if lt IE 9]>
		<script type="text/javascript" src="../js/ie8-responsive-file-warning.js"></script>
	<![endif]-->
	<script type="text/javascript" src="../js/ie-emulation-modes-warning.js"></script>
	<!--[if lt IE 9]>
		<script type="text/javascript" src="../js/html5shiv.min.js"></script>
		<script type="text/javascript" src="../js/respond.min.js"></script>
	<![endif]-->
	
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/bootstarp/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/docs.min.js"></script>
	<script type="text/javascript" src="../js/ie10-viewport-bug-workaround.js"></script>
	
	<link rel="stylesheet" href="../../js/bootstarp-table/bootstrap-table.css">
    <script type="text/javascript" src="../../js/bootstarp-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../../js/bootstarp-table/extensions/export/bootstrap-table-export.js"></script>
	<!-- <script type="text/javascript" src="../../js/bootstarp-table/extensions/filter/bootstrap-table-filter.js"></script> -->
	<script type="text/javascript" src="../../js/bootstarp-table/locale/bootstrap-table-zh-CN.js"></script>
</head>
<body>

	<div class="container bs-docs-container" style="width:98%;margin-left: auto;margin-right: auto;">
		<div class="bs-docs-section">
			<h1 id="tables" class="page-header">表格 : @p.column</h1>
			<h2 id="tables-striped">参数说明：</h2>
			<p>
				在<code>@p.table</code>标签中嵌套使用。
			</p>
			<div class="bs-callout bs-callout-danger"
				id="callout-tables-striped-ie8">
				<h4>注意</h4>
				<p>
					在以下参数中已经封装默认值的，在使用过程中可以根据需求来改变参数的传值以实现不同的表格效果。参数名应注意区分大小写。
				</p>
			</div>
			<div class="table-responsive">
				<table class="table table-bordered table-striped">
					<thead>
						<tr>
							<th>变量</th>
							<th>类型</th>
							<th>默认值</th>
							<th>参考值</th>
							<th>是否选填</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><code>radio</code></td>
							<td>Boolean</td>
							<td>false</td>
							<td>true / false </td>
							<td>是</td>
							<td>设置为True显示单选框，单选框列有固定的宽度。</td>
						</tr>
						<tr>
							<td><code>checkbox</code></td>
							<td>Boolean</td>
							<td>false</td>
							<td>true / false </td>
							<td>是</td>
							<td>设置为True显示复选框，复选框列有固定的宽度。</td>
						</tr>
						<tr>
						  <td><code>field</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>-</td>
						  <td>否</td>
						  <td>列标识名称。</td>
					  </tr>
						<tr>
						  <td><code>title</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>表头标题。</td>
					  </tr>
						<tr>
						  <td><code>class</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>列的样式名称。</td>
					  </tr>
						<tr>
						  <td><code>align</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>left / right / center</td>
						  <td>是</td>
						  <td>定义列的水平对齐方式，只能为：&quot;left&quot;, &quot;right&quot; 和 &quot;center&quot;。</td>
					  </tr>
						<tr>
						  <td><code>halign</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>left / right / center</td>
						  <td>是</td>
						  <td>定义表头的水平对齐方式，只能为：&quot;left&quot;, &quot;right&quot; 和 &quot;center&quot;。</td>
					  </tr>
						<tr>
						  <td><code>valign</code></td>
						  <td>String</td>
						  <td>-</td>
						  <td>top / middle / bottom</td>
						  <td>是</td>
						  <td>定义列的垂直对齐方式，只能为：&quot;top&quot;, &quot;middle&quot; 和 &quot;bottom&quot;。</td>
					  </tr>
						<tr>
						  <td><code>width</code></td>
						  <td>Number</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>列的宽度，假如没有定义，将根据内容自适应宽度。</td>
					  </tr>
						<tr>
						  <td><code>sortable</code></td>
						  <td>Boolean</td>
						  <td>true</td>
						  <td>true / false </td>
						  <td>是</td>
						  <td>设置为True允许对该列进行排序。</td>
					  </tr>
						<tr>
						  <td><code>order</code></td>
						  <td>String</td>
						  <td>asc</td>
						  <td>asc / desc</td>
						  <td>是</td>
						  <td>定义列排序的顺序，只能为“asc”和“desc”。</td>
					  </tr>
						<tr>
						  <td><code>visible</code></td>
						  <td>Boolean</td>
						  <td>true</td>
						  <td>true / false </td>
						  <td>是</td>
						  <td>设置为False隐藏该列。</td>
					  </tr>
						<tr>
						  <td><code>switchable</code></td>
						  <td>Boolean</td>
						  <td>true</td>
						  <td>true / false </td>
						  <td>是</td>
						  <td>设置为False禁用切换列的显示/隐藏。</td>
					  </tr>
						<tr>
						  <td><code>clickToSelect</code></td>
						  <td>Boolean</td>
						  <td>true</td>
						  <td>true / false </td>
						  <td>是</td>
						  <td>设置为True时点击行即可选中单选/复选框。</td>
					  </tr>
						<tr>
						  <td><code>formatter</code></td>
						  <td>Function</td>
						  <td>limit</td>
						  <td>limit</td>
						  <td>是</td>
						  <td>列的格式化方法，包含3个参数：<br />
						    value: 该单元格的数据。<br />
						    row: 该行的数据。<br />
					      index: 该行的index。</td>
					  </tr>
						<tr>
						  <td><code>events</code></td>
						  <td>Object</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>当你使用格式化方式时，可以对该列的元素进行事件监听。包含三个参数：<br />
						    event: jQuery 事件。<br />
						    value: 该单元格的数据。<br />
						    row: 该行的数据。<br />
					      index: 该行的index。</td>
					  </tr>
						<tr>
						  <td><code>sorter</code></td>
						  <td>Function</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>可对列进行自定义排序，包含两个参数：<br />
						    a: 第一个值。<br />
					      b: 第二个值。</td>
					  </tr>
						<tr>
						  <td><code>cellStyle</code></td>
						  <td>Function</td>
						  <td>-</td>
						  <td>-</td>
						  <td>是</td>
						  <td>列样式格式化方法，有三个参数：<br />
						    row: 行记录的数据。<br />
						    value: 该单元格的数据。<br />
						    index: 行数据的 index。<br />
					      支持 classes 或者 css.</td>
					  </tr>
					</tbody>
				</table>
			</div>
		
		</div>
	</div>

	<!-- Footer ================================================== create by zhaohaitao -->
	<footer class="bs-docs-footer" role="contentinfo">
	<div class="container">
		<p>天网软件统一资源管理平台 UI层封装参考手册 ver1.0</p>
		<ul class="bs-docs-footer-links text-muted">
			<li>Bootstarp当前版本： v3.3.4</li>
			<li>&middot;</li>
			<li>Bootstarp Table 当前版本： v1.7.0</li>
		</ul>
	</div>
	</footer>

</body>
</html>